gen-color($color)
  $renderColor = lookup('$' + $color + '-color')
  border-color $renderColor
  border 1px solid $renderColor
  color $renderColor

.{$timeline-prefix}
  list-style none
  margin 0
  padding 0 10px
  &-item
    list-style none
    position relative
    display flex
    &:last-child
      .{$timeline-prefix}-item-content, .{$timeline-prefix}-item-time
        padding-bottom 10px
        &:after
          border-left 1px solid rgba($white-color, 0)
    &.{$timeline-prefix}-item-blue-color
      .{$timeline-prefix}-item-circle
        gen-color('blue')
    &.{$timeline-prefix}-item-green-color
      .{$timeline-prefix}-item-circle
        gen-color('green')
    &.{$timeline-prefix}-item-yellow-color
      .{$timeline-prefix}-item-circle
        gen-color('yellow')
    &.{$timeline-prefix}-item-red-color
      .{$timeline-prefix}-item-circle
        gen-color('red')
    &.has-icon
      .{$timeline-prefix}-item-circle
        font-size 15px
        border none
        [class*=" d-icon"], [class^="d-icon"]
          position absolute
          top -3px
  &-item-time
    width 100px
    padding 0 24px 30px 0
    color $dark3-color
    font-size $font-size-mini
    display none
    text-align right
  &-item-content
    padding 0 0 30px 24px
    position relative
    flex 1
    &:after
      content ''
      position absolute
      top 3px
      bottom 0
      left 0
      border-left 1px dashed $gray2-color
      z-index 1
  &-item-circle
    position absolute
    width 14px
    height 14px
    border 1px solid $blue-color
    color $blue-color
    border-radius 14px
    left -7px
    top 3px
    background $white-color
    z-index 2
  &-pending
    .{$timeline-prefix}-item
      &:nth-last-of-type(2)
        .{$timeline-prefix}-item-content
          padding-bottom 40px
          &:after
            border-left 1px dotted $gray4-color
  &-time
    .{$timeline-prefix}-item-time
      display block
